<template>
	<view class="brandaLLBox">
		<scroll-view scroll-y="true" :style="{height:height}" :scroll-into-view="pptoView" scroll-with-animation
		 show-scrollbar class="content-list">

			<!-- 全部品牌项 -->
			<view class="brand-all-title flex flex-jc-sb flex-ai-c">
				<view class="allbran" @click="getBrand({ bid: '' })">全部品牌</view>
				<view class="carnum">{{ brandTotal }}辆</view>
			</view>

			<!-- 品牌详细列表 -->
			<view v-for="(item, index) in Brandlist" :id="item.initial" :key="item.initial">
				<view class="b-list">
					<view class="list-cell" v-for="(item1, index1) in item.data" :key="index1">
						<view class="brandcss" @tap="getBrand(item1)">
							<view class="iconimg">
								<image :src="'https://files.yzsheng.com/goodimg/brandimg/' + item1.bid + '.png'" mode="aspectFit"></image>
							</view>
							<view :class="xuanzebrand === item1.bid ? 'brannameZT' : 'branname'">{{ item1.brand }}</view>
							<view class="carnum">{{ item1.carNumber }}条</view>
							<view class="Spin">
								<view :class="xuanzebrand === item1.bid ? 'ppjiantougo' : 'ppjiantou'">
									<!-- <u-icon name="arrow-right" color="#9A9A9A" size="12rpx"></u-icon> -->
								</view>
							</view>
						</view>

					</view>
				</view>
			</view>

		</scroll-view>
		<!-- 字母索引 -->
		<view class="floor flex flex-dir-c flex-jc-sb">
			<view v-for="(item, index) in indexlist" :data-id="item" :key="index" @click="bindToView" class="floor-item">{{ item }}</view>
		</view>
	</view>
</template>

<script>
	export default{
		props:{
			height:{
				type:[Number,String],
				default:100
			},
			Brandlist:{
				type:[Array,Object],
				default:()=>[]
			},
			brandTotal:{
				type:[Number,String],
				default:0
			}
		},
		data(){
			return{
				pptoView: 'A',
				xuanzebrand: '',
				indexlist: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'],
			}
		},
		filters: {
		  // 过滤将letter的值Aa ，转为# 进行显示
		  letter(str) {
		    return str === 'Aa' ? '#' : str
		  }
		},
		created() {
			// this.GetCarBrandList();
		},
		methods:{
			// 品牌字母索引到对应内容
			bindToView(event) {
				var id = event.currentTarget.dataset.id;
				this.pptoView = id;
			},
			// 获取品牌
			getBrand(val) {
				let id=val.brand
				this.$emit('change', val.bid,val);
				this.$emit('close')
				// this.$emit('getBrandName', val.brand);
					// this.$emit('close')
					// this.downStatus = false; 
				
			},
			// 封装下拉筛选关闭方法
			downClose() {
				this.$refs.uDropdown.close();
				this.downStatus = false; // 打开下拉菜单
			},
			// 品牌接口请求
			async GetCarBrandList() {
				try {
					const res = await this.$api.common.GetCarBrandList();
					this.Brandlist = res.data;
					if (this.Brandlist.length !== 0) {
						let sum = 0;
						this.Brandlist.forEach(item => {
							item.data.forEach(c => {
								sum += c.carNumber;
							});
						});
						this.brandTotal = sum;
					} else {
						this.brandTotal = 0;
					}
					// console.log(res.data, '品牌')
				} catch (err) {
					console.log(err);
				}
			},
		}
	}
</script>

<style lang="scss">
	// 全部品牌
	.brand-all-title {
		width: 100%;
		padding: 20rpx;
		margin-right:40rpx;
		border-bottom: 2rpx solid #eee;
		background: #ffffff;
	}
	
	// 品牌列表样式
	.b-list {
		padding: 0rpx 20rpx;
		background: rgba(255, 255, 255, 1);
		border-radius: 10rpx;
	
		.list-cell {
			box-sizing: border-box;
			width: 100%;
			padding: 10rpx 0px 0px 0px;
			overflow: hidden;
			color: #323233;
			font-size: 14px;
			line-height: 24px;
			background-color: #fff;
			border-bottom: 1px solid #eeeeee;
		}
	
		.brandcss {
			display: flex;
			flex-direction: row;
	
			.iconimg {
				image {
					width: 66rpx;
					height: 66rpx;
				}
			}
		}
	}
	
	.Brandcss {
		background: rgba(255, 255, 255, 1);
		border-radius: 10rpx;
	
		.list-cell {
			box-sizing: border-box;
			width: 100%;
			padding: 10rpx 0px 0px 0px;
			overflow: hidden;
			color: #323233;
			font-size: 14px;
			line-height: 24px;
			background-color: #fff;
			border-bottom: 1px solid #eeeeee;
		}
	
		.brandcss {
			display: flex;
			flex-direction: row;
	
			.iconimg {
				image {
					width: 66rpx;
					height: 66rpx;
				}
			}
		}
	}
	
	.brandcss {
		display: flex;
		flex-direction: row;
	
		&.title-box {
			padding: 0rpx 40rpx 20rpx 0;
			margin: 0 30rpx;
			border-bottom: 2rpx solid #eee;
		}
	}
	
	.iconimg {
		image {
			width: 66rpx;
			height: 66rpx;
		}
	}
	
	.branname {
		text-align: left;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(102, 102, 102, 1);
		line-height: 80rpx;
		margin-left: 50rpx;
		width: 50%;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
	}
	
	.brannameZT {
		text-align: left;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #fbb000;
		line-height: 80rpx;
		margin-left: 50rpx;
		width: 50%;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
	}
	
	.allbran {
		font-size: 34rpx;
		color: #333333;
	}
	
	.carnum {
		margin-top: 10rpx;
		width: 30%;
		text-align: right;
		font-size: 32rpx;
		color: #666666;
	}
	
	.Spin {
		// width: 100rpx;
		padding-left: 20rpx;
	}
	
	/* 下展*/
	.ppjiantougo {
		margin-top: 10rpx;
		width: 10%;
		text-align: center;
		font-size: 32rpx;
		color: #666666;
		transform: rotate(90deg);
		transition: 0.3s;
		padding-right: 20rpx;
	}
	
	/* 折叠 */
	.ppjiantou {
		margin-top: 10rpx;
		width: 10%;
		text-align: center;
		font-size: 32rpx;
		color: #666666;
		transform: rotate(0deg);
		transition: 0.3s;
		padding-right: 20rpx;
	}
	
	.cartycss {
		display: flex;
		flex-direction: row;
	}
	
	.xiliename {
		text-align: left;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(102, 102, 102, 1);
		line-height: 80rpx;
		margin-left: 114rpx;
		width: 520rpx;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
	}
	
	.list-cell2 {
		box-sizing: border-box;
		padding: 10rpx 0px 0px 0px;
		overflow: hidden;
		color: #323233;
		font-size: 14px;
		margin-left: 30rpx;
		line-height: 24px;
		background-color: #fff;
		border-bottom: 1px solid #eeeeee;
	}
	
	.xilienamezt {
		text-align: left;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #fbb000;
		line-height: 80rpx;
		margin-left: 114rpx;
		width: 520rpx;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
	}
	
	.peizhibox {
		.peizhicss {
			background: #f6f6f6;
			border-radius: 10rpx;
			padding: 22rpx;
			width: 642rpx;
	
			.peizhi {
				padding: 4rpx 0rpx;
				display: flex;
				flex-direction: row;
	
				/* 未选 */
				.peizhixz {
					font-size: 26rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #666666;
					margin-top: 3rpx;
	
					image {
						margin-left: 16rpx;
						width: 40rpx;
						height: 40rpx;
						transform: rotate(-90deg);
					}
				}
	
				/* 已选配置 */
				.peizhigo {
					font-size: 26rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #666666;
					margin-top: 3rpx;
	
					image {
						margin-left: 16rpx;
						width: 40rpx;
						height: 40rpx;
						transform: rotate(0deg);
					}
				}
	
				.peizhiname {
					text-align: left;
					font-size: 26rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #666666;
					margin-left: 90rpx;
					width: 520rpx;
					white-space: nowrap;
					text-overflow: ellipsis;
					overflow: hidden;
				}
			}
		}
	}
	.brandaLLBox {
		background-color: #f6f6f6;
		// height: 100vh;
		position: relative !important;
		// 字母索引
		.floor {
			position: absolute !important;
			top: 80rpx !important;
			right: 2rpx !important;
			width: 44rpx !important;
			// height: calc(100vh - 260rpx) !important;
			text-align: center;
			font-size: 20rpx;
			font-weight: bold;
			color: #fbb000 !important;
		}
	}
</style>
